<!--
 * @Description:属性查询 attribute_query
 * @Version: 2.0
 * @Author: zhao
 * @Date: 2022-06-14 11:43:33
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-08 09:47:08
-->
<template>
    <div class="attributeQuery">
        <div class="attributeQuery_box">
            <div class="attributeQuery_search">
                <zsearch :search-props="{ width: '100%', IsSeniorSearch: true }" ref="zsearch" />
            </div>

            <div class="attributeQuery_cont">
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="16" :lg="16" :xl="18">
                        <div class="attributeQuery_cont_title">
                            <span>结果列表</span>
                            <span style="color: #888">共计{{ PaginationData.total }}条</span>
                        </div>
                        <ul class="attributeQuery_cont_left">
                            <div v-if="tableData.length > 0">
                                <li class="attribute cursor" v-for="(i, index) in tableData" :key="index" @click="open(i)">
                                    <el-divider />
                                    <p>
                                        <span style="word-spacing: 10px">题 名：</span>
                                        <span style="color: #0000ee" class="cursor">{{ i.title }}</span>
                                        <span class="star" @click.stop="setStar(i)">
                                            <i class="el-icon-star-on" v-if="i.select" style="color: #d5301b"></i>
                                            <i class="el-icon-star-off" v-else></i>
                                        </span>
                                    </p>
                                    <p>
                                        <span style="word-spacing: 10px">作 者：</span>
                                        <span>{{ i.author }}</span>
                                    </p>
                                    <p>
                                        <span>形成单位：</span>
                                        <span>{{ i.formInstitution }}</span>
                                    </p>
                                    <p>
                                        <span style="word-spacing: 10px">档案号：</span>
                                        <span>{{ i.sn }}</span>
                                    </p>
                                    <p>
                                        <span style="word-spacing: 10px">摘 要：</span>
                                        <span class="ellipsis">{{ i.abstract }}</span>
                                    </p>
                                </li>
                                <el-divider />
                            </div>
                            <div v-else>
                                <p>没有数据</p>
                            </div>
                        </ul>
                    </el-col>
                    <el-col :xs="24" :sm="8" :lg="8" :xl="6">
                        <div class="attributeQuery_cont_right" style="margin-top: 38px">
                            <zMap :MapParameter="MapParameter" ref="zMap" />
                            <el-button size="mini" @click="openSpatialRetrieval()">查看大图 </el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div style="text-align: center;">
                <zPagination ref="zPagination" />
            </div>
        </div>
    </div>
</template>

<script>
import zsearch from "@/components/zSearch/index.vue"
import zMap from "@/components/zMap"
import zPagination from "@/components/zTable/pagination.vue"
import { mapState } from "vuex"
export default {
    name: "AttributeQuery",
    components: {
        zsearch,
        zMap,
        zPagination,
    },
    computed: {
        ...mapState("table", ["PaginationData", "tableData"]),
    },
    props: {},
    data() {
        return {
            aqData: [],
            total: "",
            MapParameter: {
                center: [116.394926, 39.9125],
                zoom: 6,
                mapPoint: [],
            },
            // isFirstEnter:false,
        }
    },


//     created() {
//      this.isFirstEnter=true;
//    },

// beforeRouteLeave(to, from, next){
//     if (to.path=='/SpatialRetrieval') {
//         to.meta.isBack = true;
//     }else{
//         to.meta.isBack = false;
//     }
//     next(0);
//     },


    // beforeRouteLeave(to,from,next){
    //     to.meta.keepAlive = true
    //         next(0)
    //     },


    // beforeRouteEnter(to, from, next) {
    //     if (from.name == "FileInfoDetails") {
    //       to.meta.isBack = true;
    //     } else {
    //       to.meta.isBack = false;
    //     }
    //     next();
    //   },

    //   beforeRouteEnter(to, from, next) {
    //     if (to.name == "SpatialRetrieval") {
    //       to.meta.isBack = true;
    //     } else {
    //       to.meta.isBack = false;
    //     }
    //     next();
    //   },

    //   activated() {
    //     if (!this.$route.meta.isBack || this.isFirstEnter) { 
    //         this.str=''
    //         this.getData();
            
    //     }
    //         this.$route.meta.isBack = false;
    //         this.isFirstEnter=false;
    // },

    mounted() {
        this.$store.state.search.isOpen = true
        this.$store.state.table.searchData.pageSize = 10
        this.$store.state.table.searchData.pageIndex = 1
        this.GetArchive()
        this.$store.state.table.PaginationData.layout = "total, sizes, prev, pager, next, jumper"
        this.clipmap()
    },
    watch: {
        // "$store.state.table.PaginationData": {
        //     handler: (val, oldVal) => {
        //         console.log("🚀 ~ file: index.vue ~ line 139 ~ this.GetArchive()", this.GetArchive())
        //         this.GetArchive()
        //     },
        //     immediate: true,
        //     deep: true
        // },
        // "$store.state.table.searchData": {
        //     handler: (val, oldVal) => {
        //         console.log("🚀 ~ file: index.vue ~ line 148 ~ this.GetArchive()", this.GetArchive())
        //         this.GetArchive()
        //     },
        //     immediate: true,
        //     deep: true
        // },
    },
    methods: {
        GetArchive() {
            this.$store.state.table.url = "ArchiveInfo/getArchive"
            this.$refs.zsearch.GetArchive()
            // const searchData = {
            //     pageSize: this.PaginationData.pageSize,
            //     pageIndex: this.PaginationData.pageIndex,
            // }
            // const { data, count } = await this.$store.dispatch("ArchiveInfo/getArchive", searchData)
            // data.map(e => {
            //     e.LonLat = this.getCentralData(e.maxX, e.maxY, e.minX, e.minY)
            // })
            // this.$store.state.table.PaginationData.total = count
            // this.$store.state.table.tableData = data
        },
        setAdvanced() {
            this.$refs.zsearch.setAdvanced()
        },
        open(data) {
            this.$store.commit("table/SET_ROWDATA", data)

            this.$router.push({ name: "FileInfoDetails" })

            
        },
        //获取中心坐标
        getCentralData(oneLon, oneLat, twoLon, twoLat) {
            //oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度；
            let aLon = 0,
                aLat = 0
            let bLon = Number(oneLon) - Number(twoLon)
            let bLat = Number(oneLat) - Number(twoLat)
            //Math.abs()绝对值
            if (bLon > 0) {
                aLon = Number(oneLon) - Math.abs(bLon) / 2
            } else {
                aLon = Number(twoLon) - Math.abs(bLon) / 2
            }
            if (bLat > 0) {
                aLat = Number(oneLat) - Math.abs(bLat) / 2
            } else {
                aLat = Number(twoLat) - Math.abs(bLat) / 2
            }
            return [aLon, aLat]
        },
        async setStar(val) {
            let parameter = {
                sn: val.sn,
                title: val.title,
                category: val.category,
                district: val.district,
            }
            const { code } = await this.$store.dispatch("collectRecord/addCollectRecord", parameter)
            if (code == 200) this.GetArchive()
        },
        delStar() {},
        //设置行政区划遮罩
        clipmap() {
            this.$nextTick((e) => {
                // this.$refs.zMap.setBoundaryDraw("130000_full")
            })
        },
        openSpatialRetrieval() {
            this.$store.state.map.pageType = "AttrilbuteQuery"

            this.$store.state.table.PaginationData.total = this.tableData.length
            this.setzPaginationPagesize(this.tableData.length)
            this.$router.push({ path: "/SpatialRetrieval" })
        },
        setzPaginationPagesize(num) {
            if (num <= 10) {
                this.$store.state.table.searchData.pageSize = 10
            } else if (num <= 20) {
                this.$store.state.table.searchData.pageSize = 20
            } else if (num <= 50) {
                this.$store.state.table.searchData.pageSize = 50
            } else if (num <= 100) {
                this.$store.state.table.searchData.pageSize = 100
            } else {
                this.$store.state.table.searchData.pageSize = 10
            }
        },
    },
}
</script>

<style scoped lang="scss">
.attributeQuery {
    padding: var(--main-padding);
    // padding-left: calc(100vw - 100%);
    margin-bottom: 120px;

    .attributeQuery_box {
        background: white;
        min-height: $height_full;
        padding: 10px 20px 50px;
    }
}

.attributeQuery_search {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.attributeQuery_cont {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;

    .el-row {
        width: 100%;
    }

    .attributeQuery_cont_title {
        border-left: 4px solid #1eb08b;

        // h2 {
        //     margin: 5px 0;
        //     padding: 0 10px;
        // }
        span:first-child {
            font-size: 0.36rem;
            padding: 0 10px 0 6px;
        }
    }

    .attributeQuery_cont_left {
        font-size: 0.259rem;
        color: #696969;

        li {
            padding: 0 10px;

            // overflow: hidden;
            p {
                display: flex;

                span:first-child {
                    display: inline-block;
                    width: 1.3rem;
                    text-align: left;
                }

                span:nth-child(2) {
                    display: inline-block;
                    width: calc(100% - 1.3rem);
                }

                .star {
                    text-align: right;
                    font-size: 24px;
                }
            }

            &:hover {
                background: #edf2fe;
            }
        }
    }

    .attributeQuery_cont_right {
        position: relative;
        height: 500px;
        // padding: 0 20px;
        margin: 0.32rem 0;
        border: 1px solid #ccc;

        .el-button {
            position: absolute;
            top: 0px;
            right: 0px;
        }
    }
}
</style>
